<template>
  <div>
    <div style="width: 100%; height: 100vh; overflow: hidden" class="bgImg">
      <div class="login-card">
          <img src="../assets/logo.png" alt="Logo" class="logo-img">
          <div class="item" style="font-size: 20px; color: black">注册</div>
          <div class="item">
            <input type="text" v-model="user.username" class="inputItem" placeholder="请输入用户名">
          </div>
          <div class="item">
            <input v-model="user.phonenumber" class="inputItem" placeholder="请输入手机号">
          </div>
          <div class="item">
            <input type="password" v-model="user.password" class="inputItem" placeholder="请输入密码">
          </div>
          <div class="item">
            <input type="password" v-model="user.confirm" class="inputItem" placeholder="请确认密码">
          </div>
          <div class="item">
            <button style="background: dodgerblue; border-radius: 5px; color: white; width: 100%; padding: 10px; cursor: pointer" @click="register">注册</button>
          </div>
          <div style="padding: 10px 0; text-align: center">
            <span style="cursor: pointer; color: #409EFF" @click="$router.push('/login')">已有账号,去登录</span>
          </div>
        </div>
      </div>
  </div>
</template>

<script>

import API from "@/utils/request";

export default {
  name: "Register",
  data() {
    return {
      user: {}
    }
  },
  methods: {
    register() {
      if (!this.user.username) {
        this.$message({
          type: "error",
          message: "请输入用户名"
        })
        return
      }
      if (!this.user.phonenumber) {
        this.$message({
          type: "error",
          message: "请输入手机号"
        })
        return
      }
      if (!this.user.password) {
        this.$message({
          type: "error",
          message: "请输入密码"
        })
        return
      }
      if (!this.user.confirm) {
        this.$message({
          type: "error",
          message: "请确认密码"
        })
        return
      }
      if (this.user.password !== this.user.confirm) {
        this.$message({
          type: "error",
          message: "密码输入不一致"
        })
        return
      }
      API.post("/register", this.user).then(res => {
        if (res.code === 200) {
          this.$message({
            type: "success",
            message: "注册成功"
          })
          this.$router.replace("/login")
        } else {
          this.$message({
            type: "error",
            message: res.msg
          })
        }
      })
    }
  }
}
</script>

<style scoped>
  .bgImg {
    /* background: url("../assets/bg.jpg") no-repeat; */
    background-size: 100% 100vh;
  }
  .item {
    text-align: center;
    padding: 10px 0
  }
  .logo-img {
    width: 100px; /* 根据需要调整大小 */
    /* margin-bottom: 20px; */
}
.bgImg {
  background-size: 100% 100vh;
}

.item {
  text-align: center;
  padding: 10px 0
}

.loginBtn {
  background: forestgreen;
  border-radius: 5px;
  color: white;
  width: 100%;
  padding: 10px;
  cursor: pointer
}

.inputItem {
  width: 100%;
  padding: 10px;
  border-radius: 5px;
}

.bgImg {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    /* background-image: url("../assets/bg.jpg") no-repeat;  */
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.login-card {
    width: 500px;
    height: 520px;
    border-radius: 10px;
    margin: 50px auto;
    box-shadow: 10px 10px 10px rgba(149, 126, 126, 0.5);
    background-color: rgba(255, 255, 255, 0.9); /* 背景颜色带透明度 */
    padding: 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.item {
    width: 100%;
    margin-bottom: 10px;
}

.inputItem {
    width: 100%;
    padding: 10px;
    font-size: 16px;
    border: 1px solid #dcdfe6;
    border-radius: 5px;
    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
}

.inputItem:focus {
    border-color: #409eff;
}

.loginBtn {
    width: 100%;
    padding: 10px;
    font-size: 16px;
    color: white;
    background-color: #1890ff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color .2s;
}

.loginBtn:hover {
    background-color: #409eff;
}
</style>
